import * as React from 'react';
import { Form, Input } from 'antd';
import MForm, { createMForm, FormItemLayout } from '../../../component/form/MForm';


class CustomerDetailStep extends MForm {

  constructor(props: any) {
    super(props);
    this.state = {};
  }
  // 组件将要加载
  componentWillMount() {
    window.setTimeout(() => {
      this.fetchLoad();
    }, 100);
  }
  
  handleSubmit = () => {
    this.props.onSubmit();
  }

  renderUI() {
    const { getFieldDecorator } = this.props.form;
    const style = {
      display: this.props.show === false ? 'none' : 'block'
    }
    return (
      <div style={style} className='view-form'>
        <Form ref='form' onSubmit={this.handleSubmit}>
          <section className='view-section'>
            <Form.Item
              {...FormItemLayout}
              label='E-mail'
              ref='email'
              hasFeedback>{getFieldDecorator('email', {
                rules: [{
                  type: 'email', message: 'The input is not valid E-mail!',
                }, {
                  required: false, message: 'Please input your E-mail!',
                }],
              })(
                <Input />
                )}
            </Form.Item>
            <Form.Item
              {...FormItemLayout}
              label='NickName'
              ref='nickName'
              hasFeedback>{getFieldDecorator('nickName', {
                rules: [{
                  required: false, message: 'The input is required!'
                }, {
                  min: 2, message: 'Please input more than 2 char!',
                }],
              })(
                <Input />
                )}
            </Form.Item>
          </section>
        </Form>
      </div>
    );
  }
}
export default createMForm(CustomerDetailStep);

